import { Button } from "../../components";
import Icon from "../../assets/list_number.svg";
import IconList from "../../assets/list.svg";
import useToggleMark from "../hooks/toggle-mark-block";


type ListPorps={
  type?:'number'|'bulleted'
}

export default (props:ListPorps) => {
  const {type='number'}=props;
  const {toggleBlockMark,isBlockActive} = useToggleMark();
  const format=type==='number'?'numbered-list':'bulleted-list';
  const icon=type==='number'?Icon:IconList;
  

  return (
    <Button
      active={isBlockActive(format)}
      onClick={() => {
        toggleBlockMark(format);
      }}
      icon={icon}
    />
  );
};
